<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <h:form id="frmBandejaProductos">
        <p:growl id="msgBandejaProductos"/>
        <table width="100%" cellspacing="0" cellpadding="0">
            <tr>
                <td style="text-align: left;vertical-align: bottom;padding-bottom: 4px;" >
                    <h:outputText value=":: Módulo de Productos" styleClass="ui-tittle-text"/>
                </td>
            </tr>
        </table>
        <p:separator />
        <table border="0" style="width: 99%" align="center">
            <tr>
                <td>
                    <p:fieldset style="background-color:#F1FDFD;width: 99%;">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table border="0" width="100%">
                                        <tr>
                                            <td style="width:4%">
                                                <h:outputText class="colorTexto" value="Código: " />
                                            </td>
                                            <td style="padding-right: 20px;width: 40px">
                                                <p:autoComplete id="codigo" minQueryLength="2" value="#{productoMB.b_codProd}" completeMethod="#{productoMB.autoCompleteProducto}" effect="fade" size="30"
                                                                var="p" itemLabel="#{p.codigo}" itemValue="#{p.codigo}" scrollHeight="150">
                                                    <p:column>
                                                        <h:outputText value="#{p.codigo}" />
                                                    </p:column>
                                                    <p:column>
                                                        <h:outputText value="#{p.tipoProducto.descripcion}" />
                                                    </p:column>
                                                </p:autoComplete>
                                            </td>
                                            <td style="padding-right: 4px;">
                                                <p:commandButton value="Buscar" icon="ui-icon-search" 
                                                                 action="#{productoMB.buscarProductos}"
                                                                 update="tblListaProductos"
                                                                 onstart="wvBuscando.show()"
                                                                 oncomplete="wvBuscando.hide()"
                                                                 ajax="true"/>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </p:fieldset>
                    <p:spacer height="10" width="10" />
                    <p:dataTable id="tblListaProductos"
                                 emptyMessage="Sin productos a mostrar"
                                 value="#{productoMB.productos}"
                                 scrollable="true" scrollHeight="430" 
                                 var="p"
                                 paginator="true" rows="17" paginatorPosition="bottom" rowsPerPageTemplate="20,30,40"
                                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 selectionMode="single"
                                 rowKey="#{p.codigo}"
                                 rowIndexVar="row">
                        <p:column headerText="Nro." style="width: 5px;">
                            #{row+1}
                        </p:column>
                        <p:column headerText="Código" style="width: 50px;">
                            #{p.codigo}
                        </p:column>
                        <p:column headerText="Descripción" style="width: 150px;">
                            #{p.descripcion}
                        </p:column>
                        <p:column headerText="Tipo" style="width: 50px;">
                            #{p.tipoProducto.descripcion}
                        </p:column>
                        <p:column headerText="Cantidad" style="width: 30px;">
                            <h:outputText value="#{p.cantidad}" styleClass="#{p.cantidad le 0 ? 'colored' : null}"/>
                        </p:column>
                        <p:column headerText="Unid. Med." style="width: 50px;">
                            #{p.unidadMedida.descripcion}
                        </p:column>
                        <p:column headerText="Estado" style="width: 50px;">
                            <h:outputText value="#{p.estado}" />
                        </p:column>
                        <p:column headerText="Acciones" style="width: 30px; text-align: center">
                            <p:commandButton icon="ui-icon-pencil" 
                                             update=":frmEdicionProducto"
                                             styleClass="ui-boton-tabla"
                                             title="Editar"
                                             action="#{productoMB.obtenerProducto}"
                                             onclick="wvEdicionProducto.show()">
                                <f:setPropertyActionListener value="#{p}" target="#{productoMB.producto}" />
                            </p:commandButton>
                            <p:commandButton icon="ui-icon-circle-close" 
                                             styleClass="ui-boton-tabla"
                                             title="Dar de baja"
                                             update=":frmConfirmacionEliminarProducto"
                                             oncomplete="wvConfirmacionEliminarProducto.show()"
                                             disabled="#{p.estado eq 'Inactivo'}">
                                <f:setPropertyActionListener value="#{p}" target="#{productoMB.productoSelected}" />
                            </p:commandButton>
                        </p:column>
                    </p:dataTable>
                </td>
            </tr>
        </table>
    </h:form>
    <p:dialog header="Buscando..." id="dlgBuscando"
              widgetVar="wvBuscando" modal="true" styleClass="ui-campo_formulario" 
              closable="no">
        <div align="center" style="width: 100%">
            <img src="imagenes/loading_serch.gif" border="0" />
        </div>
    </p:dialog>
    <p:dialog header="Procesando..." id="dlgProcesando"
              widgetVar="wvProcesando" modal="true" styleClass="ui-campo_formulario" 
              closable="no">
        <div align="center" style="width: 100%">
            <img src="imagenes/loading2.gif" border="0" />
        </div>
    </p:dialog>
</ui:composition>

